/* eslint-disable */
import { Chart, Tooltip, Axis, Legend, Bar } from 'viser-react';
import * as React from 'react';
export class Group extends React.Component {
    render() {
        const DataSet = require('@antv/data-set');
        const sourceData = [
            { name: 'London', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47 },
            { name: 'Berlin', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, 'May': 52.6 },
        ];
        const dv = new DataSet.View().source(sourceData);
        dv.transform({
            type: 'fold',
            fields: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May'],
            key: 'key',
            value: 'value',
        });
        const data = dv.rows;
        return (
            <div id="Group">
                <Chart forceFit height={600} padding={100} data={data}>
                    <Tooltip />
                    <Axis />
                    <Legend />
                    <Bar position="key*value" color="name" adjust={[{ type: 'dodge', marginRatio: 1 / 32 }]} />
                </Chart>
            </div>
        );
    }
}

